<template>
    <div v-loading="loading">
        <el-form ref="formRef" :model="formData" label-width="150px">
            <el-card shadow="never" class="!border-none">
                <el-form-item label="文件限制：" prop="upload_file_size">
                    <div class="w-80">
                        <el-input v-model.trim="formData.upload_file_size" placeholder="请输入文件限制" />
                        <div class="el-form-tips">单位：KB，0表示不限制上传大小</div>
                    </div>
                </el-form-item>
                <el-form-item label="文件格式：" prop="upload_file_ext">
                    <div class="w-80">
                        <el-input v-model.trim="formData.upload_file_ext" placeholder="请输入文件格式" />
                        <div class="el-form-tips">多个格式请用英文逗号（,）隔开</div>
                    </div>
                </el-form-item>
                <el-form-item label="图片限制：" prop="upload_image_size">
                    <div class="w-80">
                        <el-input v-model.trim="formData.upload_image_size" placeholder="请输入图片限制" />
                        <div class="el-form-tips">单位：KB，0表示不限制上传大小</div>
                    </div>
                </el-form-item>
                <el-form-item label="图片格式：" prop="upload_image_ext">
                    <div class="w-80">
                        <el-input v-model.trim="formData.upload_image_ext" placeholder="请输入图片格式" />
                        <div class="el-form-tips">多个格式请用英文逗号（,）隔开</div>
                    </div>
                </el-form-item>
            </el-card>
        </el-form>
        <footerSubmit>
			<el-button v-auth="'setting/setUploadInfo'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
    </div>
</template>

<script lang="ts" setup name="systemUpload">
import { ref, reactive, onMounted } from 'vue';
import { getUploadInfo, setUploadInfo } from '/@/api/setting/webset';
import { messageSuccess } from '/@/utils/message';

const formRef = ref(null);

const loading = ref(true);

// 表单数据
const formData = reactive({
    upload_file_size: '', // 文件限制
    upload_file_ext: '', // 文件格式
    upload_image_size: '', // 图片限制
    upload_image_ext: '', // 图片格式
});

// 获取数据
const getData = async () => {
    const data = await getUploadInfo();
    for (const key in formData) {
		if(data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
    }
    loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
    await formRef.value?.validate();
    await setUploadInfo(formData);
    messageSuccess('设置成功');
    getData();
};

onMounted(() => {
	getData();
});
</script>